<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>闲言轻博客</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>
    <link rel="stylesheet" href="/css/main.css">
    <script src="/js/jquery-2.1.4.min.js"></script>


    <!--视频播放器-->
    <!--<link href="//vjs.zencdn.net/7.3.0/video-js.min.css" rel="stylesheet">-->
    <link href="/plugins/videojs/video-js.min.css" rel="stylesheet">
    <!--<script src="//vjs.zencdn.net/7.3.0/video.min.js"></script>-->
    <script src="/plugins/videojs/video.min.js"></script>

    <script src="/js/echarts.min.js"></script>

    <style>
        /*评论*/
        .comment-area {
            padding-left: 80px;
            padding-right: 50px;

        }

        .hide {
            display: none;
        }

        .comment-area textarea {
            width: 100%;
            overflow: auto;
            word-break: break-all;
            height: 100px;
            color: #000;
            font-size: 1em;
            resize: none;
            border-color: rgb(169, 169, 169);
        }

        .disabled {
            color: rgba(100, 100, 100, 0.6)
        }

        .author-right {
            padding-left: 10px;
        }

        .author-right .content {
            background-color: white;
        }

        .card-headerText {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-weight: 600;
            font-size: 15px;
            color: #1a1a1a;
            -webkit-tap-highlight-color: rgba(26, 26, 26, 0);
        }

        .number-board {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
        }

        .card-section {
            display: flex;
            flex-direction: row;
            padding: 10px 0 20px 10px;
        }

        .card-section img {
            width: 60px;
            height: 60px;
            border-radius: 5px;
        }

        .card-section h2 {
            font-size: 16px;
            font-weight: 900;
        }


        .keyword {
            font-size: 14px;
            border: 1px solid;
            border-radius: 5px;
            height: 23px;
            padding: 0 2px;
            margin: 5px;
        }

        .first {
            background-color: #000;
            color: white;
        }

        .keyword:hover {
            cursor: pointer;
        }

        .time-line {
            display: flex;
            flex-direction: row;
            padding: 10px 20px;
        }

        .video-cut {
            margin: 0;
            padding: 0;
            display: inline-block;
            height: 9px;
            background: white;
            width: 10px;
        }

        .time-line:hover {
            cursor: pointer;
        }

        .captionCaption {
            height: 315px;
            overflow: hidden;
            position: relative;
            margin-top: 20px;
        }

        .captionCaption p {
            display: block;
            margin-block-start: 0.5em;
            margin-block-end: 0.5em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
        }
        #captionContainer p.active{
            color: #adff2f;
            font-weight: bold;
        }

        #lyricContainer {
            /*text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000;*/
        }

        #captionContainer {
            position: relative;
            transition:top 1s;
        }

        .pos {
            display: inline-block;
            margin: 0px -4px 0 0;
            padding: 0px;
            height: 13px;
            background-color: green;
            width: 35%;
        }

        .neg {
            display: inline-block;
            margin: 0px;
            padding: 0px;
            height: 13px;
            background-color: red;
            width: 35%;
        }

        .cap-text {
            width: 70%;
            height: 22px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .lay-this {
            color: red;
        }

    </style>
</head>
<body class="lay-blog">
<div th:include="/teacher/templates::header"></div>
<div class="container-wrap">
    <div class="container" style="width: 90%;">
        <div class="layui-row" id="video_vue">
            <div class="layui-col-md7" id="video_left">
                <div id="video_player">
                </div>
                <div style="background-color: white; padding: 20px;">
                    <div class="count layui-clear">
                        <span class="pull-left" style="cursor: pointer;">阅读 <em>{{readCount}}</em></span>
                        <span class="pull-right" style="margin: 0 20px;cursor: pointer;" @click="collectHandler()"
                              >
                                <i :class="{'layui-icon':true,'lay-this':collect}" style="position:relative; top: 0;">&#xe658;</i>收藏
                            </span>
                        <span class="pull-right like" @click="zanHandler($event)"  style="cursor: pointer;">
                            <i :class="{'layui-icon':true,'layui-icon-praise':true,'lay-this':zan}"></i><em>{{zanCount}}</em>
                        </span>
                    </div>
                </div>

                <!--<div class="comment">-->
                    <div class="comt layui-clear">
                        <div>
                            <a href="javascript:;" @click="showTextArea($event,1, '')"
                               :class="{'pull-left':true, 'disabled':!enableComment}">评论</a>
                        </div>
                        <div class="comment-area hide">
                            <textarea cols="80" rows="50" placeholder="来说几句吧......" class=""></textarea>
                            <span class="send" style="color: #aaa;">
                            <!--发送回复，评论ID-->
                            <a href="javascript:;" @click="sendComments($event)">发送</a>
                        </span>
                        </div>
                        <!--<a :href="'/teacher/article/comment.html?id='+article.id" class="pull-right">写评论</a>-->
                    </div>
                    <div id="LAY-msg-box" style="padding: 20px 50px; background-color: white">
                        <!--所有评论-->
                        <div class="info-item" v-for="(c,index) in comments" :key="index" :id="'comment_pos'+index"
                            style="margin-bottom: 20px;">
                            <!--<a :name="'comment_pos_'+index" class="hide">&nbsp;</a>-->
                            <img class="info-img" src="/images/info-img.png" alt="" style="float: left;border-radius: 50%">
                            <div class="info-text" style="padding-left: 80px;">
                                <p class="title count">
                                    <span class="name"
                                          style="font-size: 16px; font-family: 微软雅黑">{{c.user.username}}</span>
                                    <!--<span class="info-img like"><i class="layui-icon layui-icon-praise"></i>5.8万</span>-->
                                </p>
                                <div class="comment-time" style="margin: 0px 0 10px 10px;">
                                    <span style="font-size: 10px ">{{c.time}}</span>
                                </div>
                                <p class="info-intr" style="margin-top: 10px;">
                                    {{c.content}}
                                </p>
                            </div>

                            <div id="replyList" style="">
                                <div style="float: right;color: #aaa; padding-right: 20px; font-size: 12px;">
                                    <a href="javascript:;" @click="showTextArea($event,2,c.user.id)">回复</a>
                                </div>
                                <div class="comment-area hide">
                                    <textarea cols="80" rows="50" placeholder="来说几句吧......" class=""></textarea>
                                    <span class="send" style="color: #aaa;">
                                    <!--发送回复，评论ID-->
                                    <a href="javascript:;"
                                       @click="sendReply(c.id, {id:c.user.id,username:c.user.username},index, $event)">发送</a>
                                </span>
                                </div>
                            </div>
                            <!--所有回复-->
                            <div style="border-left: 1px solid #ccc; margin-left: 75px; ">
                                <div class="reply-list" v-for="(r, index) in c.replyList" :key="index"
                                     style="font-size:14px;padding-left: 10px;margin-top: 20px;">
                                    <div class="reply">
                                        <div>
                                            <a href="#">{{r.from.username}}:</a>
                                            <a href="#">@{{r.to.username}}</a>
                                            <span>{{r.content}}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                <!--</div>-->
            </div>
            <div class="layui-col-md5">
                <div style="padding: 5px 0 3px 15px; background-color: white; margin: 0 10px;" id="video_analysis">
                    <div class="layui-tab layui-tab-card">
                        <ul class="layui-tab-title">
                            <li class="layui-this">视频摘要</li>
                            <li>时间轴</li>
                        </ul>
                        <div class="layui-tab-content" style="">
                            <div class="layui-tab-item layui-show">
                                <div id="keywords" style="padding: 10px;">
                                    <h5> 关键词</h5>
                                    <div style="display: flex; flex-direction: row; flex-wrap: wrap">
                                        <div v-for="(key, index) in video.keywords"
                                             :class="{keyword:true, first:(index==0)}" :key="index">{{key}}
                                        </div>
                                    </div>
                                </div>
                                <div id="sentiment" style="padding: 10px;">
                                    <h5>情感分析</h5>
                                    <div style="font-size: 14px; display: flex;flex-direction: row">
                                        <div class="positive" style="margin:10px;">
                                            <span style="display: inline-block;width: 8px;height: 8px; background-color: green; border-radius: 50%"></span>
                                            30.64% 积极
                                        </div>
                                        <div class="negative" style="margin:10px;">
                                            <span style="display: inline-block;width: 8px;height: 8px; background-color: red; border-radius: 50%"></span>
                                            3.87% 消极
                                        </div>
                                    </div>
                                    <div class="time-line">
                                        <div class="video-cut" name="1"></div>
                                    </div>
                                </div>
                                <div class="" style="padding: 10px;">
                                    <h5>情感分布图</h5>
                                    <div id="pic1" style="height: 300px; margin: 20px auto;"></div>
                                </div>
                            </div>
                            <div class="layui-tab-item">
                                <div class="captionCaption">
                                    <div id="captionContainer" style="top: 0px; font-size: 14px;">
                                        <div v-for="(item, index) in video.timelines" :key="index"
                                             style="display: flex; flex-direction: row;justify-content: space-between;">
                                            <p :id="`line-${index}`" :class="{'cap-text':true,active:(index==0)}"
                                               style="">
                                                {{item[1].join('')}}
                                            </p>
                                            <div style="line-height: 35px; width: 30%;">
                                                <i class="layui-icon">&#xe6af;</i>
                                                <div class="pos" :style="`width:${item[3]*70}%`"></div>
                                                <div class="neg" :style="`width:${70-item[3]*70}%`"></div>
                                                <i class="layui-icon">&#xe69c;</i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </div>

    </div>
</div>

<div th:include="/teacher/templates::footer"></div>
<script src="/vue/vue.js"></script>
<script>
    // window.onscroll = function computedDisplay(){//不管怎么操作的，只要滚动条动了就会触发这个行为
    //     var curTop = document.documentElement.scrollTop || document.body.scrollTop;
    //     var curHeight = document.documentElement.clientHeight || document.body.clientHeight;
    //     console.log(curTop)  // 超过125px后将视频播放器指定
    //     if(curTop>130){
    //         $('#video_left').css('top', (curTop-125)+'px');
    //     }else{
    //         $('#video_left').css('top', '0px');
    //     }
    // }

    const videoZanApi = api.videoZan;
    const getVideoZanStateApi = api.getVideoZanState;
    const videoZanCountApi = api.videoZanCount;
    const videoCommentApi = api.videoComment;
    const getCommentsByVideoIdApi = api.getCommentsByVideoId;
    const videoReplyApi = api.videoReply;

    var param = document.location.href.split('?')[1];
    var id = param.split('=')[1];

    // var apiBase = "http://172.15.120.249:8000";


    function initVideo(videoUrl, capUrl, cover) {
        var video = `<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none"
                                               style="width: 100%; "
                                               poster="${cover}">
                                            <source id="video_source" src="${videoUrl}" type="video/mp4"/>
                                            <track id="track_source" src="${capUrl}" srclang="zh-cn" label="我的字幕" kind="caption" default>
                                        </video>`;
        $('#video_player').html(video)
        player = videojs('example_video_1', {
            muted: true,
            controls: true / false,
            height: 480,
            // width: 300,
            loop: true,
            // 更多配置.....
        });
    }

    function initTimeLines() {
        // 时间轴
        for (var i = 0; i < VideoAnaly.video.timelines.length; i++) {
            var cut = VideoAnaly.video.timelines[i];
            var length = cut[0][1] - cut[0][0];
            if (cut[2] == 'zh') {
                if (cut[3] >= 0.7) {
                    var item = `<div class="video-cut" name="${i}" style="background-color:green !important;width:${length}"></div>`;
                    $('.time-line').append(item)
                } else if (0.5 <= cut[3] < 0.7) {
                    var item = `<div class="video-cut" name="${i}" style="width:${length}"></div>`;
                    $('.time-line').append(item)
                } else {
                    var item = `<div class="video-cut" name="${i}" style="width:${length};background-color: red"></div>`;
                    $('.time-line').append(item)
                }
            }

        }
        // 字幕播放

    }

    VideoAnaly = new Vue({
        el: '#video_vue',
        data: {
            video: {},
            comments: [],
            currIndex: 0, // 字幕播放的索引  timelines[index]

            zan: false,  //是否点赞了
            zanCount: 0,
            collect: false,  // 是否收藏该文章了
            readCount: 0,
            loginUser: {},
            enableComment: true
        },
        created: function () {
            // 加载视频
            this.init();
            // initzan
            this.initZan();
            // initcomment
            this.initComments();
        },
        watch: {
            currIndex: function (newValue) {
                // 字幕容器向上移动36px
                $('#captionContainer').css('top', newValue*(-36)+'px');
                $('#captionContainer p').removeClass('active')
                $('#line-'+newValue).addClass('active')
            }
        },
        methods: {
            init: function () {
                $.ajax({
                    url: '/api/video/' + id,
                    type: 'get',
                    success: res => {
                        this.video = res.data;
                        this.video.videoUrl = "/upload/video/" + res.data.videoFilename;
                        this.video.captionUrl = "/upload/video/" + res.data.captionFilename;
                        this.video.captionExt = res.data.captionExt;
                        this.video.videoExt = res.data.videoExt;
                        initVideo(this.video.videoUrl, this.video.captionUrl, this.video.coverImg);
                        // 加载字幕时间轴
                        initTimeLines();
                        // 加载饼状图
                        loadPie(this.video.posGrade, this.video.negGrade);
                        this.playeTimer()
                    }
                });


            },
            playeTimer() {
                var _this = this;
                y = 20;
                player.on('play', () => {
                    videoTimer = window.setInterval(() => {
                        var curr = player.currentTime();
                        // var end = _this.video.timelines[_this.currIndex][0][1];  //当前字幕的结束时间
                        var index = _this.getCurrIndex(curr);
                        if(index!=null){
                            _this.currIndex = index;
                        }

                        console.log(_this.currIndex)
                    }, 1000);
                });
                player.on('pause', function () {
                    window.clearInterval(videoTimer)
                });

            },
            getCurrIndex(time) {
                for(var i=0;i<this.video.timelines.length;i++){
                    if (time < this.video.timelines[i][0][1] && time >= this.video.timelines[i][0][0]) {
                        return i;
                    }
                }
                return null;
            },
            collectHandler(){

            },
            async initZan() {  //获取文章点赞状态
                var res = await getVideoZanStateApi(id);
                if (res.code == 0)
                    this.zan = res.data;
                // 获取点赞数量
                var res2 = await videoZanCountApi(id);
                if (res2.code == 0)
                    this.zanCount = res2.data;
            },
            async zanHandler(e) {
                if (this.zan == true)
                    return;
                var res = await videoZanApi({videoId:id})
                if (res.code == 0) {
                    this.zan = true;
                    this.zanCount++;
                    layer.msg('点赞成功', {
                        icon: 6
                        , time: 1000
                    })
                }
            },
            async getLoginUser() {                  // 获取登陆用户信息
                // 获取当前登录的用户
                var data = await getLoginUser();
                this.loginUser = data.data;

            },
            // 评论
            async initComments() {
                var res = await getCommentsByVideoIdApi(id);
                this.comments = res.data;
            },
            showTextArea(event,type,target) {  // 展示输入框
                if(type==1){
                    if (!this.enableComment) {
                        layuiUtil.msg.msgWarning('不可评论自己的文章！', 2);
                        return;
                    }
                    $('div.comment-area').addClass("hide")
                    $(event.target).parent().parent().find("div.comment-area").removeClass("hide")
                }else{
                    if (this.loginUser.id == target) {
                        layuiUtil.msg.msgWarning('不可回复自己！', 2);
                        return;
                    }
                    $('div.comment-area').addClass("hide")
                    $(event.target).parent().parent().find("div.comment-area").removeClass("hide")
                }
            },
            async sendComments(event) {  // 发送评论
                var content = $(event.target).parent().prev().val(); // 评论内容a
                var res = await videoCommentApi({videoId:id, content})
                if (res.code == 0) {
                    this.comments.push(res.data);
                    $('div.comment-area').addClass("hide");
                    // 定位
                    window.setTimeout(() => {
                        var t = $("#comment_pos" + (this.comments.length - 1)).offset().top;
                        $(window).scrollTop(t);//滚动到锚点位置
                    }, 1000)
                    $('div.comment-area textarea').val("");
                }
            },
            async sendReply(commentId, to, index, event) {  // from为当前登录用户，在后台获取
                var content = $(event.target).parent().prev().val();
                // 添加回复
                // console.log(commentId)
                // console.log(to)
                // console.log(content)
                var res = await videoReplyApi({commentId, toId:to.id, toUsername:to.username, content})
                if (res.code == 0) {
                    if (this.comments[index].replyList == null) {
                        this.comments[index].replyList = [];
                    }
                    this.comments[index].replyList.push(res.data)
                    $('div.comment-area').addClass("hide")
                    $('div.comment-area textarea').val("");
                }
            },
        }

    });


    layui.use('element', function () {
        var element = layui.element;

        //…
    });

    function loadPie(pos, neg) {
        var myCharts1 = echarts.init(document.getElementById('pic1'));
        option = {
            title: {
                text: '文章情感极性分析',
                subtext: '正面和负面',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                data: ['正面情绪', '负面情绪']
            },
            toolbox: {
                show: true,
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    magicType: {
                        show: true,
                        type: ['pie', 'funnel'],
                        option: {
                            funnel: {
                                x: '25%',
                                width: '50%',
                                funnelAlign: 'left',
                                max: 1548
                            }
                        }
                    },
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            calculable: true,
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [
                        {value: pos, name: '正面情绪'},
                        {value: neg, name: '负面情绪'},
                    ]
                }
            ]
        };

        myCharts1.setOption(option);
    }


</script>
</body>
</html>